<script setup lang="ts"></script>

<template>
  <div class="content">
    <div class="content_L">
      <div id="bigImg">
        <div id="fdj"></div>
        <img src="http://127.0.0.1:8080/src/views/@Admin/DangDang/img/s004.jpg" />
      </div>
      <ul class="smallImg">
        <li><img src="http://127.0.0.1:8080/src/views/@Admin/DangDang/img/s004.jpg" /></li>
      </ul>
      <a class="scBtn">收藏商品</a>
      <!-- <div id="largeImg">
        <img src="http://127.0.0.1:8080/src/views/@Admin/DangDang/img/s004.jpg" id="imgB" />
      </div> -->
    </div>

    <div class="content_C">
      <h2>西游记</h2>
      <p class="bkPresent">阿巴阿巴</p>
      <p>作者：<span class="blue">吴承恩 </span></p>
      <p>出版社：<span class="blue">青岛出版社</span></p>
      <p>出版时间：<span>2022年9月</span></p>
      <p><del>定价：￥24.00</del></p>
      <p>当前价：<span class="price">24.00</span></p>
      <p>
        配送地址选择：<span class="space"></span>省：
        <select name="">
          <option value="">山西</option>
          <option value="">河北</option>
          <option value="">湖南</option>
          <option value="">广东</option>
        </select>
        <span class="space"></span>
        市：
        <select name="">
          <option value="">北京</option>
          <option value="">天津</option>
          <option value="">广州</option>
          <option value="">上海</option>
        </select>
        <span class="space"></span>
        县（区）：
        <select name="">
          <option value="">昌平区</option>
          <option value="">天津</option>
          <option value="">广州</option>
          <option value="">上海</option>
        </select>
      </p>
      <a href="<%=basePath%>/jsp/ShopCar.jsp"><button class="addBtn">加入购物车</button></a>
      <p>支持七天无理由退货</p>
    </div>
    <div class="clear"></div>

    <div class="clear"></div>
  </div>
</template>
<style scoped>
@import "./css/reset.css";
@import "./css/HeaAndFoo.css";
@import "./css/jquery-ui.theme.min.css";
@import "./css/jquery-ui.min.css";
.content_L {
  float: left;
  width: 330px;
  height: 500px;
  position: relative;
  text-align: left;
}

.smallImg {
  width: 310px;
  height: 70px;
  padding: 10px;
  float: left;
}

.smallImg li {
  width: 70px;
}

.smallImg li img {
  width: 70px;
}

#bigImg {
  width: 330px;
  height: 330px;
  position: relative;
  float: left;
  z-index: 100;
}

#bigImg img {
  width: 100%;
  height: 100%;
}

.scBtn {
  display: block;
  width: 80px;
  height: 20px;
  margin-top: 30px;
  text-align: right;
  float: left;
}

#largeImg {
  width: 330px;
  height: 330px;
  position: relative;
  overflow: hidden;
  position: absolute;
  top: 0px;
  left: 300px;
}

#fdj {
  display: none;
  width: 165px;
  height: 165px;
  background-color: #ccc;
  filter: alpha(opacity=50);
  -moz-opacity: 0.5;
  opacity: 0.5;
  z-index: 101;
  position: absolute;
  top: 0px;
  left: 0px;
}

#imgB {
  display: block;
  position: absolute;
}

.content_C {
  float: left;
  width: 630px;
  height: 500px;
  padding-left: 20px;
  color: #666666;
  text-align: left;
}

.content_C h2 {
  margin: 20px 0px;
}

.content_C p {
  margin: 15px 0px;
}

.bkPresent {
  width: 500px;
  height: 80px;
}

.blue {
  color: #1a66b3;
}

.price {
  font-size: 18px;
  color: red;
  font-weight: bold;
}

.addBtn {
  width: 120px;
  height: 40px;
  background-color: #ff2832;
  color: #fff;
  font-weight: bold;
  border: none;
  font-size: 18px;
  border-radius: 4px;
}
</style>
